<template>
    <div class="homepage">
        <div class="homepage-main">
            <div class="homepage-header">
                <div class="homepage-header-top">
                    <div class="liuhai"></div>
                </div>
                <div class="homepage-header-body">
                    <div class="homepage-header-title">
                        <div>
                            <i class="homepage-icon" @click="goTo('/mine')">&#xe600;</i>
                        </div>
                        <div>个人中心</div>
                        <div></div>
                    </div>
                    <div class="homepage-header-main">
                        <div>
                            <div>
                                <img src="../../../assets/chathead/qianji.jpg" alt="">
                            </div>
                            <div>
                                <div>至游用户</div>
                                <div>
                                    <div>
                                        <p @click="goTo('/concern')">22</p>
                                        <p @click="goTo('/concern')">关注</p>
                                    </div>
                                    <div>
                                        <p>43</p>
                                        <p>粉丝</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div></div>
                    </div>
                </div>
            </div>
            <div class="homepage-body">
                <div class="homepage-body-title">
                    <p>我的游记</p>
                </div>
                <ul class="homepage-body-list">
                    <li>
                        <ul>
                            <li>
                                <div></div>
                                <div>
                                    <div>
                                        <img src="../../../assets/chathead/luren5.jpeg" alt="">
                                        <p>至游用户</p>
                                    </div>
                                    <div></div>
                                </div>
                            </li>
                            <li>
                                <p>九寨沟珍珠滩点点水珠似珍珠洒落，风景优美壮丽</p>
                            </li>
                            <li>
                                <img src="../../../assets/dtct.png" alt="">
                            </li>
                            <li>
                                <div>
                                    <p>11月30日20:22</p>
                                </div>
                                <div>
                                    <i class="homepage-icon">&#xe602;</i>
                                    <p>456</p>
                                    <i class="homepage-icon">&#xe629;</i>
                                    <p>99</p>
                                    <p>999+人看过</p>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>
                                <div></div>
                                <div>
                                    <div>
                                        <img src="../../../assets/chathead/luren4.jpeg" alt="">
                                        <p>卖女孩的小火柴</p>
                                    </div>
                                    <div></div>
                                </div>
                            </li>
                            <li>
                                <p>啦啦啦啦，卖小姑凉真赚钱</p>
                            </li>
                            <li>
                                <img src="../../../assets/dtct1.png" alt="">
                            </li>
                            <li>
                                <div>
                                    <p>11月30日20:22</p>
                                </div>
                                <div>
                                    <i class="homepage-icon">&#xe602;</i>
                                    <p>456</p>
                                    <i class="homepage-icon">&#xe629;</i>
                                    <p>99</p>
                                    <p>999+人看过</p>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            goTo(path) {
                this.$router.replace(path)
            },
        }
    }
</script>

<style scoped>
    /***********************************************************字体图标****************************************/
    .homepage-icon{
        font-family: iconfont;
        font-size: 32px;
        font-style: normal;
    }
    .homepage-main{
        width: 100vw;
        height: 100vh;
        background-color: #eeeeee;
    }
    .homepage-header{
        width: 100%;
        height: 400px;
        display: flex;
        flex-direction: column;
        background: url("../../../assets/homepage-bg.png");
        background-size: 100% 400px;
    }
    .liuhai{
        width: 100%;
        height: 50px;
        background: none;
    }
    .homepage-header-body{
        width: 100%;
        height: 350px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .homepage-header-title{
        width: 100%;
        height: 96px;
        display: flex;
        flex-direction: row;
    }
    /**********************************************************返回按钮及页面title*************************************/
    .homepage-header-title > div{
        width: 33%;
        height: 96px;
        display: flex;
        align-items: center;
    }
    .homepage-header-title > div:nth-child(2){
        width: 34%;
        justify-content: center;
        color: white;
        font-size: 36px;
    }
    .homepage-header-title > div:nth-child(1) > i{
        margin-left: 16px;
        font-size: 36px;
        color: white;
    }
    /*****************************************************头像及相关信息**************************************/
    .homepage-header-main{
        width: 100%;
        height: 160px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        border-top-right-radius: 40px;
        border-top-left-radius: 40px;
    }
    /************************************头像************************************************************/
    .homepage-header-main > div:nth-child(1){
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(1) img{
        width: 120px;
        height: 120px;
        margin-left: 16px;
        border-radius: 50%;
    }
    /****************************************************关注及粉丝***************************************************/
    .homepage-header-main > div:nth-child(1) > div:nth-child(2){
        width: 132px;
        height: 88px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(2) > div {
        width: 132px;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
        height: 28px;
        color: #333333;
        font-size: 28px;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(2) > div:nth-child(2){
        height: 48px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div > p:nth-child(1){
        color: #f77754;
        font-size: 20px;
    }
    .homepage-header-main > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div > p:nth-child(2){
        color: #333333;
        font-size: 24px;
    }


    /***********************************************body部分*********************************************/
    .homepage-body-title{
        width: 100%;
        height: 56px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .homepage-body-title > p{
        margin-left: 16px;
        font-size: 26px;
        color: #666666;
    }
    .homepage-body-list{
        height: 100vh;
        width: 100%;
    }
    .homepage-body-list > li{
        width: 100%;
        height: 542px;
        margin-bottom: 20px;
        background-color: white;
    }
    .homepage-body-list > li > ul{
        width: 100%;
        height: 542px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .homepage-body-list > li > ul > li{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    /**************************************************用户动态列表头像及昵称****************************************/
    .homepage-body-list > li > ul > li:nth-child(1){
        height: 84px;
        flex-direction: column;
    }
    .homepage-body-list > li > ul > li:nth-child(1) > div:nth-child(1){
        width: 100%;
        height: 20px;
    }
    .homepage-body-list > li > ul > li:nth-child(1) > div:nth-child(2){
        width: 100%;
        height: 64px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .homepage-body-list > li > ul > li:nth-child(1) > div:nth-child(2) > div:nth-child(1){
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .homepage-body-list > li > ul > li:nth-child(1) > div:nth-child(2) > div:nth-child(1) > img{
        width: 64px;
        height: 64px;
        margin-left: 16px;
        border-radius: 50%;
    }
    .homepage-body-list > li > ul > li:nth-child(1) > div:nth-child(2) > div:nth-child(1) > p{
        font-size: 28px;
        margin-left: 20px;
        color: #333333;
    }
    /**********************************************************用户发表言论*****************************************/
    .homepage-body-list > li > ul > li:nth-child(2){
        width: 100%;
        height: 66px;
    }
    .homepage-body-list > li > ul > li:nth-child(2) > p{
        height: 66px;
        margin-left: 16px;
        font-size: 26px;
        line-height: 66px;
        color: #333333;
    }
    /********************************************************用户插图*****************************************************/
    .homepage-body-list > li > ul > li:nth-child(3){
        height: 320px;
    }
    .homepage-body-list > li > ul > li:nth-child(3) img{
        margin-left: 16px;
        width: 668px;
        height: 100%;
    }
    /******************************************************用户此动态相关信息*************************************************/
    .homepage-body-list > li > ul > li:nth-child(4){
        width: 100%;
        height: 72px;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(1){
        font-size: 22px;
        color: #999999;
        margin-left: 16px;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(2){
        margin-right: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(2) > p{
        font-size: 20px;
        color: #666666;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(2) > i:nth-child(1){
        margin-right: 4px;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(2) > p:nth-child(2){
        margin-right: 20px;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(2) > i:nth-child(3){
        margin-right: 4px;
    }
    .homepage-body-list > li > ul > li:nth-child(4) div:nth-child(2) > p:nth-child(4){
        margin-right: 20px;
    }
</style>